<style lang="less" scoped src="./activity.less"></style>
<script src="./activity.js"></script>

<template>
    <div>
        <Row>
            <Col span="6">
            <Row class="query">
                <Col span="6">排序：</Col>
                <Col span="18">
                <Select v-model="queryCon.order" filterable clearable>
                <Option value="1">活动名称</Option>
                <Option value="2">活动类型</Option>
                <Option value="3">截止时间</Option>
                <Option value="4">出发时间</Option>
                <Option value="5">状态</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">活动名称：</Col>
                <Col span="18">
                <Input v-model="queryCon.activityName" clearable ></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">活动类型：</Col>
                <Col span="18">
                <Select v-model="queryCon.type" filterable clearable>
                    <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">活动状态：</Col>
                <Col span="18">
                <Select v-model="queryCon.state" filterable clearable>
                    <Option value="APPLYING">正在报名</Option>
                    <Option value="END">结束</Option>
                </Select>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row>
            <Col span="6">
            <Row class="query">
                <Col span="6">是否发布：</Col>
                <Col span="18">
                <Select v-model="queryCon.release" filterable clearable>
                    <Option value="YES">是</Option>
                    <Option value="NO">否</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">是否推荐：</Col>
                <Col span="18">
                <Select v-model="queryCon.recommend" filterable clearable>
                    <Option :value="1">是</Option>
                    <Option :value="2">否</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">交通方式：</Col>
                <Col span="18">
                <Select v-model="queryCon.vehicle" filterable clearable>
                    <Option v-for="item in vehicleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            </Col>
        </Row>
        <Row class="query">
            <Col span="22">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModalVisible"
                title="活动信息"
                @on-ok="viewModalVisible = false"
                @on-cancel="viewModalVisible = false"
                width="90%"
                :mask-closable="false"
                :styles="{top: '20px'}">
            <div class="modal-div">
                <Form :model="formData" :label-width="90">
                    <Row>
                        <Col span="8">
                        <FormItem label="活动名称">
                            <div class="conts">{{formData.name}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="价格起点">
                            <div class="conts">{{formData.startprice}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="推荐排序">
                            <div class="conts">{{formData.orders}}</div>
                        </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="8">
                        <FormItem label="活动类型">
                            <div class="conts">{{formData.typename}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动时间">
                            <div class="conts">{{formData.days}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动地点">
                            <div class="conts">{{formData.address}}</div>
                        </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="8">
                        <FormItem label="交通方式">
                            <div class="conts">{{formData.vehiclename}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="报名截止时间">
                            <div class="conts">{{formData.applyendtime1}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="报名人数限制">
                            <div class="conts">{{formData.applynums}}</div>
                        </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="8">
                        <FormItem label="出发时间">
                            <div class="conts">{{formData.departtime}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="带队老师">
                            <div class="conts">{{formData.ledTeachername}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="带队老师电话">
                            <div class="conts">{{formData.teacherphone}}</div>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="活动组织者">
                            <div class="conts">{{formData.eventorganizer}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动对象">
                            <div class="conts">{{formData.activeObjectname}}</div>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动天数">
                            <div class="conts">{{formData.time}}</div>
                        </FormItem>
                        </Col>
                    </Row>
                    <FormItem label="少儿年龄说明">
                        <div class="conts">{{formData.age}}</div>
                    </FormItem>
                    <FormItem label="封面">
                        <div class="admin-upload-list" v-for="item in uploadList" :key="item.url">
                            <template>
                                <img :src="item.url">
                                <div class="admin-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="openImg(item.url)"></Icon>
                                </div>
                            </template>
                        </div>
                    </FormItem>
                    <FormItem label="活动摘要">
                        <div class="conts" style="text-align: left">{{formData.intro}}</div>
                    </FormItem>
                    <FormItem label="用户须知">
                        <div class="conts" style="text-align: left" v-html="formData.speaker">{{formData.speaker}}</div>
                    </FormItem>
                    <FormItem label="活动详情">
                        <div class="conts" style="text-align: left" v-html="formData.scheduling">{{formData.scheduling}}</div>
                    </FormItem>
                </Form>
            </div>
        </Modal>
        <Modal v-model="saveModalVisible" :title="(formData.id ? '修改' : '新增') + '活动'" width="85%"
               @on-cancel="destroyed" :mask-closable="false"
               :styles="{top: '20px'}">
            <div class="modal-div">
                <Form :model="formData" :label-width="125">
                    <Row>
                        <Col span="8">
                        <FormItem label="活动名称">
                            <Input v-model="formData.name" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="价格起点">
                            <Input v-model="formData.startprice" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="推荐排序">
                            <Input v-model="formData.orders" clearable></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="活动类型">
                            <Select v-model="formData.typeId" filterable clearable>
                                <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动时间">
                            <Input v-model="formData.days" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动地点">
                            <Input v-model="formData.address" clearable></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="交通方式">
                            <Select v-model="formData.vehicleId" filterable clearable>
                                <Option v-for="item in vehicleList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="报名截止时间">
                            <DatePicker type="date" v-model="formData.applyendtime"
                                        @on-change="formData.applyendtime=$event"></DatePicker>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="报名人数限制">
                            <Input v-model="formData.applynums" clearable></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <FormItem label="出发时间">
                            <Col span="4" v-for="item in timeList">
                            <DatePicker type="date" v-model="item.value" @on-change="item.value=$event"></DatePicker>
                            </Col>
                            <Button type="primary" shape="circle" icon="plus" @click="addTime"></Button>
                            <Button type="primary" shape="circle" icon="minus" @click="delTime"></Button>
                        </FormItem>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="活动天数">
                            <Input v-model="formData.time" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="结束时间">
                            <DatePicker type="date" v-model="formData.departendtime"
                                        @on-change="formData.departendtime=$event"></DatePicker>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        </Col>
                    </Row>
                    <Row>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动组织者">
                            <Input v-model="formData.eventorganizer" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="咨询电话">
                            <Input v-model="formData.hotline" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="封面">
                            <div class="admin-upload-list" v-for="(item, index) in uploadList" :key="item.url">
                                <template v-if="item.status === 'finished'">
                                    <img :src="item.url">
                                    <div class="admin-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="openImg(item.url)"></Icon>
                                        <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                                    </div>
                                </template>
                                <template v-else>
                                    <Spin fix v-if="item.showProgress">
                                        <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                                    </Spin>
                                </template>
                            </div>
                            <Upload ref="upload"
                                    :action="SERVER_HOST + 'upload/uploadFile'"
                                    :show-upload-list="false"
                                    :default-file-list="uploadList"
                                    :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
                                    :max-size="2048"
                                    :on-exceeded-size="handleMaxSize"
                                    :on-format-error="handleFormatError"
                                    :on-success="handleSuccess"
                                    :before-upload="handleBeforeUpload"
                                    type="drag"
                                    style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:58px;line-height: 58px;">
                                    <Icon type="camera" size="20"></Icon>
                                </div>
                            </Upload>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="此时间前优惠">
                            <DatePicker type="date" v-model="formData.discounttime"
                                        @on-change="formData.discounttime=$event"></DatePicker>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="优惠金额">
                            <Input v-model="formData.discountmoney" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="带队老师">
                            <Input v-model="formData.ledteacher" clearable @on-change="teacherInput" v-if="isInput" autofocus></Input>
                            <Select v-model="formData.ledteacherId" filterable clearable v-if="isSelect" @on-query-change="teacherSelect" @on-change="teacherPhone">
                                <Option v-for="item in ledTeacherList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="带队老师电话">
                            <Input v-model="formData.teacherphone" clearable></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="是否发布">
                            <Select v-model="formData.releases" filterable clearable>
                                <Option value="YES">是</Option>
                                <Option value="NO">否</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem label="活动对象">
                            <Select v-model="formData.activeobjectId" filterable clearable>
                                <Option v-for="item in activeObjectList" :value="item.id" :key="item.id">{{ item.name }}
                                </Option>
                            </Select>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                        <FormItem label="少儿年龄说明">
                            <Input v-model="formData.age" clearable></Input>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row style="display:none">
                        <Col span="8">
                        <FormItem label="是否购买保险">
                            <Select v-model="formData.isinsurance" filterable clearable>
                                <Option :value=1>是</Option>
                                <Option :value=0>否</Option>
                            </Select>
                        </FormItem>
                        </Col>
                        <Col span="16" v-if="formData.isinsurance==1">
                        <FormItem label="保险说明">
                            <Select v-model="formData.procode" filterable clearable>
                                <Option v-for="item in insuranceList" :value="item.casecode" :key="item.casecode">
                                    {{ item.prodname + " 。保险公司：" + item.companyname + "。保险计划：" + item.planname }}
                                </Option>
                            </Select>
                        </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="8">
                        <FormItem label="是否需要填写身份证">
                            <RadioGroup v-model="formData.isidcard">
                                <Radio label="NO">否</Radio>
                                <Radio label="YES">是</Radio>
                            </RadioGroup>
                        </FormItem>
                        </Col>
                    </Row>
                    <FormItem label="活动摘要">
                        <!--<UEditor id="activity_intro" :config=config ref="activity_intro"></UEditor>-->
                        <Input v-model="formData.intro" type="textarea" :autosize="{minRows: 3,maxRows: 7}"></Input>
                    </FormItem>
                    <FormItem label="用户须知">
                        <UEditor id="activity_speaker" :config=config ref="activity_speaker"></UEditor>
                    </FormItem>
                    <FormItem label="活动详情">
                        <UEditor id="activity_scheduling" :config=config ref="activity_scheduling"></UEditor>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" @click="activitySave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="destroyed">取消</Button>
            </div>
        </Modal>
        <Modal v-model="priceModalVisible" title="价格设置" width="50%" @on-cancel="priceCancel" :mask-closable="false">
            <Form :model="formData" :label-width="70">
                <Row v-for="(item,index) in priceList">
                    <Col span="7">
                    <FormItem label="类目名称">
                        <Input v-model="item.name" clearable></Input>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="类目费用">
                        <InputNumber v-model="item.money" :min="0" style="width:100%"></InputNumber>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="类目人数">
                        <InputNumber v-model="item.peoplenums" :min="0" style="width:100%"></InputNumber>
                    </FormItem>
                    </Col>
                    <Col span="3" v-if="index+1==(priceList.length)">
                    <Button type="primary" shape="circle" icon="plus" @click="addPrice"></Button>
                    <Button type="primary" shape="circle" icon="minus" @click="delPrice"></Button>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="priceSave">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="priceCancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>
